<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true">
			<view class="top_bar" slot="top">
				<view class="status_bar" style="height: 44px"></view>
				<view class="tabs-w">
					<u-tabs class="uTabsNav" :list="list1" @click="changeTopModule" :inactiveStyle="{color: '#999'}"
						:activeStyle="{color: 'var(--echo-main-color)'}" lineColor="var(--echo-main-color)"
						:scrollable="false">
					</u-tabs>
				</view>
			</view>
			<!-- 切换展示的内容 -->
			<view class="change_content">

				<!-- 活动展示 -->
				<template v-if="topShowType == 0">
					<view class="activity_card" v-for="(item,index) in dataList"
						@click="goToActivityDetail(item.serialNo)" :key="index">
						<!-- 标题 -->
						<view class="title">
							<!-- 图标 -->
							<view class="title_logo" @click.stop="goToDao">
								<image src="../../static/images/logo.png"></image>
							</view>
							<!-- 活动标题 -->
							<view class="title_text">
								{{item.activityNane}}
							</view>
						</view>
						<!-- 活动内容 -->
						<view class="description">
							<image style="height: 280rpx; width: 100%;" :src="item.activityImg" mode="aspectFill"></image>
						</view>
						<!-- 其他 -->
						<view class="other">
							<!-- card footer -->
							<view class="type">
								<view class="">{{item.activityTime}}</view>
								<view class="tag">
									<u-tag :text="item.activityAddress" type="warning" plain plainFill size="mini">
									</u-tag>
								</view>
							</view>
						</view>
					</view>
				</template>

				<!-- dao展示 -->
				<template v-if="topShowType == 1">
					<!--轮播-->
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
						<swiper-item v-for="(item, index) in swiperList" :key="item.index">
							<view class="swiper_item">
								<image class="banner_img" :src="item"></image>
							</view>
						</swiper-item>
					</swiper>
					<!-- dao分类 -->
					<u-tabs :list="tablist" :current="tabIndexShow" @click="changeDaoTab"
						:inactiveStyle="{color: '#999'}" :activeStyle="{color: 'var(--echo-main-color)'}"
						lineColor="var(--echo-main-color)">
					</u-tabs>
					<!-- 展示 -->
					<view class="dao_card" v-for="(item,index) in dataList" @click="goToDaoDetail(item.serialNo)">
						<!-- 标题 -->
						<view class="title">
							<!-- 图标 -->
							<view class="title_logo">
								<image :src="item.logo"></image>
							</view>
							<!-- 文字 -->
							<view class="title_text">
								{{item.daoName}}
							</view>
						</view>
						<!-- 描述 -->
						<view class="description">
							{{item.profile}}
						</view>
						<!-- 其他 -->
						<view class="other">
							<!-- 社区类型 -->
							<view class="type">
								<view class="">社区类型:</view>
								<view class="tag">
									<u-tag text="dao" type="warning" plain plainFill size="mini"></u-tag>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getOpinionPageList
	} from '@/config/opinion.js';
	import {
		getDaoPageList
	} from '@/config/dao.js';
	import {
		getActivityPageList
	} from '@/config/activity.js';
	export default {
		data() {
			return {
				dataList: [],
				token: "",
				tabIndexShow: 0, // 分段器展示
				list1: [{
					name: '活动',
				}, {
					name: 'DAOS',
				}],
				topShowType: 0, // 控制顶部的展示类型
				// 轮播
				swiperList: [
					"https://ipfs.s11edao.com/ipfs/QmaXGms7ghBiEw6ajLqdSAk6vg78W2JJzjmMBE6kpEFeA9",
					"https://ipfs.s11edao.com/ipfs/Qmdkn69qaRVNLzoqiNAb99aZehTzWU6uDoDio3k1jsHgpf",
					"https://ipfs.s11edao.com/ipfs/QmSNQLm6ZwWUeheLLf2KSb19Nazr8Qj5XCykV6JvWwYDW7"
				],
				tablist: [{
						name: '服务类',
					},
					{
						name: '收藏类',
					},
					{
						name: '协议类',
					},
					{
						name: '社交类',
					},
					{
						name: '操作类',
					},
					{
						name: '资助类',
					},
					{
						name: '投资类',
					},
					{
						name: '媒体类',
					}
				],
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			uni.$on('updateMomentList', () => {
				this.$refs.paging.reload()
			})
		},
		methods: {
			queryList(pageNo, pageSize) {
				if (this.topShowType == 0) {
					getActivityPageList({
						pageNo,
						pageSize
					}).then(res => {
						this.$refs.paging.complete(res.data);
					})
				} else {
					getDaoPageList({
						type: String(this.tabIndexShow),
						pageNo,
						pageSize
					}).then(res => {
						this.$refs.paging.complete(res.data);
					})
				}
			},

			goToDaoDetail(serialNo) {
				uni.navigateTo({
					url: `/pagesHome/DaoDetail?serialNo=${serialNo}`
				})
			},
			goToActivityDetail(serialNo) {
				uni.navigateTo({
					url: `/pagesHome/ActivityDetail?serialNo=${serialNo}`
				})
			},

			// 顶部模块的改变
			changeTopModule({
				index
			}) {
				console.log(index)
				this.topShowType = index
				this.$refs.paging.reload()
			},

			changeDaoTab({
				index
			}) {
				// 根据不同类型查询dao数据
				this.tabIndexShow = index
				this.$refs.paging.reload()
			},
			// 去dao展示页
			goToDao() {
				uni.navigateTo({
					url: `/pagesHome/DaoDetail`
				})
			},

			// 点击操作菜单
			doAction(e) {
				uni.showActionSheet({
					itemList: ['点赞', '评论'],
					success: res => {
						if (res.tapIndex === 0) {
							console.log('点赞操作');
						} else {
							console.log('评论操作');
						}
					},
				});
			},

			// 发布
			doPublish() {
				if (!this.token) {
					uni.$u.toast('请先登陆')
					return
				}
				uni.navigateTo({
					url: "/pages/Home/PublishOpinion"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.u-tabs {
	    width: 200px !important;
	    margin: 0 auto !important;
	}
	.tabs-w{
		width: 180px !important;
		margin: 0 auto !important;
	}
	
	.uTabsNav {
		width: 200px !important;
		margin: 0 auto !important;
		display: flex !important;
		padding-bottom: 5px;
		justify-content: space-around !important;
	}

	// 去掉列表最后一个border-bottom
	.special_style {
		border-bottom: none !important;
	}

	// 公共头像样式
	.avatar {
		border-radius: 50%;
		width: 90rpx;
		height: 90rpx;
		border: 1px solid #ddd;
		overflow: hidden;
	}

	.app_top {
		height: 200rpx;
	}

	.content {

		.top_bar {
			background-color: #fff;
		}

		// 顶部安全距离
		.status_bar {
			height: var(--status-bar-height);
		}

		// swiper展示区域
		.swiper_item,
		.banner_img {
			width: 100%;
			height: 100%;
		}

		// dao展示区域
		.dao_card {
			box-shadow: 4px 4px 26px 6px rgba(0, 0, 0, 0.08);
			border-radius: 1rem;
			height: 360rpx;
			padding: 30rpx;
			margin: 30rpx 30rpx;

			.title {
				display: flex;
				align-items: center;

				&_logo {
					width: 100rpx;
					height: 100rpx;
					margin-right: 30rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&_text {
					font-size: $echo-font-size-title;
				}
			}

			.description {
				margin: 20rpx 0 20rpx 0;
				height: 156rpx;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.other {
				color: #999;

				.type,
				.link {
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.tag,
					.tolink {
						margin-left: 24rpx;
						display: flex;
						align-items: center;
					}

				}

				.link {
					margin-top: 10rpx;

					.icon {
						margin-right: 10rpx;
					}
				}
			}
		}

		// activity展示区域
		.activity_card {
			box-shadow: 4px 4px 26px 6px rgba(0, 0, 0, 0.08);
			border-radius: 1rem;
			padding: 30rpx;
			margin: 30rpx 30rpx;

			.title {
				display: flex;
				align-items: center;

				&_logo {
					width: 100rpx;
					height: 100rpx;
					margin-right: 30rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&_text {
					font-size: $echo-font-size-title;
				}
			}

			.description {
				margin: 20rpx 0 20rpx 0;
				line-height: 40rpx;
			}

			.other {
				color: #999;

				.type,
				.link {
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.tag,
					.tolink {
						margin-left: 24rpx;
						display: flex;
						align-items: center;
					}

				}

				.link {
					margin-top: 10rpx;

					.icon {
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
